<template>
    <!-- 首页下的更多 -->
    <div class="groop">
        <!-- 轮播页面 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in grooplist.banner" :key="item.id">
                <img :src="item.img" alt="" />
            </van-swipe-item>
        </van-swipe>

        <!-- 文字信息 -->
        <tan-pin>促销单品</tan-pin>

        <!-- 商品条页面 -->
        <article-view v-if="grooplist" :article="grooplist.list"></article-view>
        <!-- 加载更多 -->
        <div class="more" ref="more" @click="mores">{{ add ? "点击加载更多。。。" : "给不了更多了。。。。" }}</div>
    </div>
</template>

<script>
import ArticleView from "../ArticleView.vue";
import TanPin from "./TanPin.vue";
export default {
    components: { ArticleView, TanPin },
    data() {
        return {
            grooplist: [], // 数据表
            limitIndex: 5, // 第一次加载5条
            lengths: 0, // 旧数据的长度
            add: true, //记录当前是否是可以加载新数据的状态
        };
    },
    props: {
        listIndex: {
            type: String,
            default: "0",
        },
    },
    methods: {
        getGroop(index) {
            this.axios.get(`/groom/list/${this.listIndex}?page=1&limit=${index}`).then((re) => {
                // console.log(re);
                // 判断当前的数据是不是小于 新增的数据
                if (this.lengths < re.list.length) {
                    this.lengths = re.list.length;
                    this.grooplist = re;
                } else {
                    // 当前的数据不小于新数据，不在加载
                    this.add = false;
                }
            });
        },
        // 点击加载更多
        mores() {
            // 判断当前是否是可以加载新数据的状态
            if (!this.add) return;
            this.limitIndex += 5;
            this.getGroop(this.limitIndex);
        },

        // 滚动加载更多
        scrollfn() {
            let a = document.scrollTop || document.documentElement.scrollTop;
            let b = window.innerHeight;
            let c = this.$refs.more.offsetTop;
            if (a + b + 50 >= c) {
                this.mores();
            }
        },
    },
    created() {
        // 第一次获取数据
        this.getGroop(this.limitIndex);
    },
    mounted() {
        // 滚动获取更多
        window.addEventListener("scroll", this.scrollfn);
    },

    // 干掉全局滚动事件
    beforeDestroy() {
        window.removeEventListener("scroll", this.scrollfn);
    },
    beforeRouteLeave(to, from, next) {
        window.removeEventListener("scroll", this.scrollfn);
        next();
    },
};
</script>

<style lang="scss" scoped>
// 轮播样式
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.my-swipe {
    height: 141px;
}

// 加载更多
.more {
    line-height: 50px;
    text-align: center;
}
</style>
